<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>Rain CSS > grids</title>
    <!-- Framework CSS -->
    <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"/>
    <!--[if lte IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
    <link rel="stylesheet" href="css/rain.css" type="text/css" media="all"/>
    <!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
</head>

<body class="body">
<div class="header headerBlue">
  	<nav class="lsn posr clearfix">
    	<a href="http://www.webdevelopmentmachine.com" class="headerLink headerLinkBlue l pr pl ib tdn">首页home</a>
    	<a href="http://www.webdevelopmentmachine.com/blog" class="headerLink headerLinkBlue l pr pl ib tdn">博客blog</a>
    	<a href="http://www.webdevelopmentmachine.com/demo/game.html" class="headerLink headerLinkBlue l pr pl ib tdn">游戏game</a>
    </nav>
</div>
<div class="headerM headerGrey">
    <div class="container posr">
        <div class="l"><a class="tdn block ptll fsxxl" href="index.html">Rain CSS</a></div>
    </div>
</div>

<div class="container mt">
    <div class="paddingTop">
        <div class="sidebar l posr">
            <h2 class="category">Grids for Mobile</h2>
            <p>This part Grids are use for mobile device</p>
        </div>
        <div class="main mainRight posr">
            <h2>Grids for Mobile</h2>
            <ul class="lsn">
                <li class="pb-2 p">
                    <fieldset>
                        <legend>Two column grids</legend>
                        <p>To build a two-column (50/50%) layout.</p>
                        <div class="grid wf-100">
                            <div class="l fl wf-50 ggrey"><div class="p fsm bord ts b nobr">A</div> </div>
                            <div class="l fl wf-50 ggrey"><div class="p fsm bord ts b">B</div></div>
                        </div>
                    </fieldset>
                </li>
                <li class="pb-2 p">
                    <fieldset><legend>Two column grids(button)</legend>
                        <p>To build a two-column (50/50%) layout(button).</p>
                        <div class="grid wf-100">
                            <div class="l fl wf-50"><a href="#" class="round-10 ggrey nob btn greybtn block tdn p tac ms">A</a></div>
                            <div class="l fl wf-50"><a href="#" class="round-10 gb btn bluebtn block tdn p tac ms">B</a></div>
                        </div>
                    </fieldset>
                </li>
                <li class="pb-2 p">
                    <fieldset><legend>Three-column grids</legend>
                        <p>To build a three-column grids (33/33/33%) layout.</p>
                        <div class="grid wf-100">
                            <div class="l fl wf-33 ggrey"><div class="p fsm bord ts b nobr">A</div></div>
                            <div class="l fl wf-33 ggrey"><div class="p fsm bord ts b nobr">B</div></div>
                            <div class="l fl wf-33 ggrey"><div class="p fsm bord ts b">C</div></div>
                        </div>
                    </fieldset>
                </li>
                <li class="pb-2 p">
                    <fieldset><legend>Three-column grids(button)</legend>
                        <p>To build a Three-column grids (33/33/33%) layout(button).</p>
                        <div class="grid wf-100">
                            <div class="l fl wf-33"><a href="#" class="round-10 ggrey nob btn greybtn block tdn p tac ms">A</a></div>
                            <div class="l fl wf-33"><a href="#" class="round-10 gb btn bluebtn block tdn p tac ms">B</a></div>
                            <div class="l fl wf-33"><a href="#" class="round-10 gg btn greenbtn block tdn p tac ms">C</a></div>
                        </div>
                    </fieldset>
                </li>
                <li class="pb-2 p">
                    <fieldset><legend>Four-column grids</legend>
                        <p>To build a Four-column grids (25/25/25/25%) layout.</p>
                        <div class="grid wf-100">
                            <div class="l fl wf-25 ggrey"><div class="p fsm bord ts b nobr">A</div></div>
                            <div class="l fl wf-25 ggrey"><div class="p fsm bord ts b nobr">B</div></div>
                            <div class="l fl wf-25 ggrey"><div class="p fsm bord ts b nobr">C</div></div>
                            <div class="l fl wf-25 ggrey"><div class="p fsm bord ts b">D</div></div>
                        </div>
                    </fieldset>
                </li>
                <li class="pb-2 p">
                    <fieldset><legend>Four-column grids(button)</legend>
                        <p>To build a Four-column grids (25/25/25/25%) layout(button).</p>
                        <div class="grid wf-100">
                            <div class="l fl wf-25"><a href="#" class="round-10 ggrey nob btn greybtn block tdn p tac ms">A</a></div>
                            <div class="l fl wf-25"><a href="#" class="round-10 gb btn bluebtn block tdn p tac ms">B</a></div>
                            <div class="l fl wf-25"><a href="#" class="round-10 gg btn greenbtn block tdn p tac ms">C</a></div>
                            <div class="l fl wf-25"><a href="#" class="round-10 gr btn redbtn block tdn p tac ms">D</a></div>
                        </div>
                    </fieldset>
                </li>
                <li class="pb-2 p">
                    <fieldset><legend>Five-column grids</legend>
                        <p>To build a Five-column grids (20/20/20/20/20%) layout.</p>
                        <div class="grid wf-100">
                            <div class="l fl wf-20 ggrey"><div class="p fsm bord ts b nobr">A</div></div>
                            <div class="l fl wf-20 ggrey"><div class="p fsm bord ts b nobr">B</div></div>
                            <div class="l fl wf-20 ggrey"><div class="p fsm bord ts b nobr">C</div></div>
                            <div class="l fl wf-20 ggrey"><div class="p fsm bord ts b nobr">D</div></div>
                            <div class="l fl wf-20 ggrey"><div class="p fsm bord ts b">E</div></div>
                        </div>
                    </fieldset>
                </li>
                <li class="pb-2 p">
                    <fieldset><legend>Five-column grids(button)</legend>
                        <p>To build a Five-column grids (20/20/20/20/20%) layout(button).</p>
                        <div class="grid wf-100">
                            <div class="l fl wf-20"><a href="#" class="round-10 ggrey nob btn greybtn block tdn p tac ms">A</a></div>
                            <div class="l fl wf-20"><a href="#" class="round-10 gb btn bluebtn block tdn p tac ms">B</a></div>
                            <div class="l fl wf-20"><a href="#" class="round-10 gg btn greenbtn block tdn p tac ms">C</a></div>
                            <div class="l fl wf-20"><a href="#" class="round-10 gr btn redbtn block tdn p tac ms">D</a></div>
                            <div class="l fl wf-20"><a href="#" class="round-10 gc btn cyanbtn block tdn p tac ms">E</a></div>
                        </div>
                    </fieldset>
                </li>
            </ul>
        </div>
    <footer class="footer socialFooter c borderTop">
      <p class="ps">Maintained by the <a href="https://github.com/rainzhai" class="blue">RainZhai</a>.</p>
      <p class="ps">Code licensed under <a rel="license" class="blue" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a rel="license"  class="blue" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p> 
    </footer>  
    </div>
</div>
</body>
</html>